<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.js"></script>
    <script src="./cart.js"></script>
    <style>
        /* 公共样式 */
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        a {
            text-decoration: none;
        }

        p,
        span,
        li,
        img {
            cursor: pointer;
        }


        .center {
            width: 1226px;
            margin: auto;
        }

        img {
            width: 100%;
        }

        /* header开始 */
        header {
            height: 40px;
            color: #b0b0b0;
            font-size: 12px;
            background-color: #333333;
        }

        header li {
            cursor: pointer;
        }

        header li:hover {
            color: white;
        }

        .header_left li {
            float: left;
            line-height: 40px;
        }

        .header_left span {
            float: left;
            margin: 0 8px;
            line-height: 40px;
            color: #424242;
        }

        .header_right {
            line-height: 40px;
        }

        .header_right li {
            float: left;
            padding: 0 5px;
        }

        .header_right li:nth-of-type(3) {
            padding: 0 20px 0 10px;
        }

        .header_right li:nth-of-type(4) {
            width: 120px;
            background-color: #424242;
            text-align: center;
            display: flex;
            justify-content: center;
            padding: 0;
        }

        .header_right li:nth-of-type(4):hover {
            color: #ff6700;
            background-color: #fff;
        }

        .header_right li:nth-of-type(4):hover .icon-gouwuchekong {
            color: #ff6700;
        }

        .header_right li:nth-of-type(4) p {
            margin-left: 10px;
        }

        .header_right .icon-gouwuchekong {
            color: #b0b0b0;

        }

        .header_right span {
            float: left;
            line-height: 40px;
            color: #424242;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        main {
            width: 1226px;
            margin: auto;
        }

        .left {
            width: 560px;
            height: 560px;
            float: left;
            padding: 30px;
            box-sizing: border-box;
        }

        .left img {
            width: 100%;
        }

        .right {
            float: right;
            width: calc(1226px - 560px);
            padding-top: 150px;
        }

        .header_right a {
            color: #b0b0b0;
            text-decoration: none;
        }

        .title {
            font-size: 24px;
            color: #212121;
            font-weight: 400;
            width: 100%;
            overflow: hidden;
            /* 隐藏超出部分 */
            text-overflow: ellipsis;
            /* 使用省略号替换隐藏的内容 */
            white-space: nowrap;
            /* 禁止文本换行 */

        }

        .price {
            font-size: 18px;
            line-height: 1;
            color: #ff6700;
            padding: 12px 0 10px;

        }

        .add,
        .minus {
            font-size: 25px;
        }

        .revise {
            margin: 10px 0 10px;
            height: 50px;
        }

        .num {
            width: 50px;
            height: 40px;
            text-align: center;
            font-size: 20px;
        }

        .addToCart {
            width: 298px;
            height: 52px;
            line-height: 52px;
            font-size: 16px;
            background: #ff6700;
            border-color: #ff6700;
            color: #fff;
            text-align: center;
        }

        p,
        span {
            user-select: none;
        }
    </style>
</head>

<body>
    <header>
        <div class="center">
            <ul class="header_left fl">
                <li>小米官网</li><span>|</span>
                <li>小米商城</li><span>|</span>
                <li>小米澎湃OS</li><span>|</span>
                <li>loT</li><span>|</span>
                <li>云服务</li><span>|</span>
                <li>天星数科</li><span>|</span>
                <li>有品</li><span>|</span>
                <li>小爱开放平台</li><span>|</span>
                <li>资质证照</li><span>|</span>
                <li>协议规则</li><span>|</span>
                <span>|</span>
                <li>Select Location</li>
            </ul>
            <ul class="header_right fr">
                <li><a href="./login1.html">登录</a></li><span>|</span>
                <li><a href="./login1.html">注册</a></li><span>|</span>
                <li>消息通知</li>

            </ul>
        </div>
    </header>
    <main>
        <!-- <div class="left">
            <img class="img" src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1701682195.37843551.jpg"
                alt="">
        </div>
        <div class="right">
            <h2 class="title">Redmi K70 Pro</h2>
            <p class="price">3299元</p>
            <p class="revise">
                <span class="minus">-</span>
                <input type="num" class="num" value="1">
                <span class="add">+</span>
            </p>
            <p class="addToCart">加入购物车</p>
        </div> -->
    </main>
</body>
<script>
    //登录状态
login()
function login() {
    var token = localStorage.getItem("token")
    var username = localStorage.getItem("username")
    var userid = localStorage.getItem("userid")
    var login = document.querySelector('.header_right>:nth-child(1)')
    var logout = document.querySelector('.header_right>:nth-child(3)')
    if (token) {
        login.innerHTML = username
        logout.innerHTML = "注销"
        logout.onclick = () => {
            AG('/users/logout', { id: userid }).then(resData => {
                localStorage.removeItem("token")
                login.innerHTML = `<a href="./login1.html">登录</a>`
                logout.innerHTML = `<a href="./login1.html">注册</a>`
            })
        }
    }else{
        
        localStorage.removeItem("cDatas")
    }
}
    //基于axios对get请求的封装
    function AG(url, params) {
        return axios({
            baseURL: 'http://localhost:8888',
            url,
            params,
        })
    }
    //基于axios的post请求的封装
    function AP(url, data) {
        return axios({
            baseURL: 'http://localhost:8888',
            method: 'post',
            url,
            data,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

        })
    }
    var id = localStorage.getItem("id")
    var main = document.querySelector("main")
    AG('goods/item', { id: id }).then(resData => {
        console.log(resData);
        main.innerHTML = `
       <div class="left">
            <img class="img" src="${resData.data.info.img_big_logo}"
                alt="">
        </div>
        <div class="right">
            <h2 class="title">${resData.data.info.title}</h2>
            <p class="price">${resData.data.info.price}元</p>
            <p class="revise">
                <span class="minus">-</span>
                <input type="num" class="num" value="1">
                <span class="add">+</span>
            </p>
            <p class="addToCart">加入购物车</p>
        </div>
       `
        var add = document.querySelector(".add")
        var minus = document.querySelector(".minus")
        var num = document.querySelector(".num")
        var addToCart=document.querySelector(".addToCart")
        revise()
        function revise() {
            add.onclick = function () {
                num.value++
            }
            minus.onclick = function () {
                if (num.value > 1) {
                    num.value--
                } else {
                    num.value = 1
                }
            }
        }
        addToCart.onclick=function(){
            saveData(id, Number(num.value))
            window.location.href="./cart.html"
        }
    })
</script>

</html>